<template>
  <div class="custom-link">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-position="right"
      label-width="100px"
      class="adaptive-form"
      @submit.native.prevent
    >
      <el-form-item
        label="链接名称"
        prop="title"
      >
        <el-col :span="12">
          <el-input v-model="ruleForm.title" />
        </el-col>
      </el-form-item>
      <el-form-item
        label="跳转类型"
        prop="map_id"
      >
        <el-radio-group v-model="ruleForm.map_id">
          <el-radio :label="301">内部链接</el-radio>
          <el-radio :label="302">外部链接</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="跳转路径"
        prop="link"
      >
        <el-col :span="12">
          <el-input v-model="ruleForm.link" />
        </el-col>
        <el-col :span="18">
          <span class="form-text text-muted font-size-sm line-height-lg">{{ linkHint && linkHint.text }}</span>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'CustomLink',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    // const checkAge = (rule, value, callback) => {}
    return {
      ruleForm: {
        title: '',
        map_id: 301,
        link: ''
      },
      linkHints: [
        {
          type: 301,
          text: '路径必须以“/”开头，例：“/pages/goods/list/list”'
        },
        {
          type: 302,
          text:
            '路径必须是可访问的外部链接地址，以“http|https://”开头，例：“https://www.domain.com/url”'
        }
      ],
      rules: {
        title: [
          {
            required: true,
            message: '请输入链接名称',

            trigger: 'blur'
          },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
        link: [{ required: true, message: '请输入链接跳转路径', trigger: 'blur' }]
      }
    }
  },
  computed: {
    weblink: {
      get() {
        return this.value
      },
      set(v) {
        this.value = v
      }
    },
    linkHint() {
      return this.linkHints.find(item => {
        return item.type === this.ruleForm.map_id
      })
    }
  },
  watch: {
    ruleForm: {
      handler(v) {
        if (v.title && v.link && v.map_id) {
          this.onEmitInput(v)
        }
      },
      deep: true
    }
  },
  mounted() {
    console.log('2mounted完成')
    const { map_id, map_data } = this.value
    if (map_id === 301 || map_id === 302) {
      this.ruleForm.map_id = map_id
    }
    if (map_data) {
      if (map_data.link) {
        this.ruleForm.link = map_data.link
      }
      if (map_data.title) {
        this.ruleForm.title = map_data.title
      }
    }
  },
  methods: {
    onEmitInput(data) {
      this.$emit('input', {
        map_id: data.map_id,
        map_data: {
          title: data.title,
          link: data.link
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-link {
  padding-top: 2rem;
}
</style>
